<template>
  <div>
    <Row style="margin-top: 3px;">
      <Col span="7">
        <Input v-model="value.key" placeholder="请输入Key值"/>
      </Col>
      <Col span="7">
        <Select v-model="value['data-type']" placeholder="请选择数据类型">
          <Option value="Object">Object</Option>
          <Option value="Array">Array</Option>
          <Option value="String">String</Option>
        </Select>
      </Col>
      <Col span="6" style="line-height: 30px; text-align: center;">
        <Input v-if="!value.childNodes" v-model="value['primary-key']" placeholder="请输入主键Key值"/>
        <span v-else>no primary-key</span>
      </Col>
      <Col span="4" class="top-operation-area">
        <Button v-if="!value.childNodes" type="success" ghost class="top-btn" @click="addSubClickHandle">增加下级</Button>
        <Button v-if="value.childNodes" type="error" ghost class="top-btn" @click="deleteSubClickHandle">删除下级</Button>
      </Col>
    </Row>
    <spider-urlconfig v-if="value.childNodes" v-model="value.childNodes"></spider-urlconfig>
  </div>
</template>
<script>
export default {
  name: 'SpiderUrlconfig',
  components: {
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    addSubClickHandle () {
      delete this.value['primary-key']
      this.$set(this.value, 'childNodes', {})
    },
    deleteSubClickHandle () {
      this.$set(this.value, 'childNodes', null)
      delete this.value['childNodes']
    }
  }
}
</script>

<style lang="less" scoped>
    .top-operation-area {
      display: flex;
      justify-content: space-around;
    }

    .top-btn {
      margin-left: 1px;
      width: 100%;
      display: inline-grid;
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        width: 100%;
      }
    }
</style>
